<template>
	<view>
		<detail :detail="detail"></detail>
		<message-list :commentList="commentList"></message-list>
		<!--  -->
		<AddComment ref='addComment' :inputBottom="inputBottom" @addComment="addComment"></AddComment>
	</view>
</template>

<script>
	import AddComment from '../comment/addComment.vue';
	export default {
		components:{
			AddComment,
		},
		data() {
			return {
				detail: {},
				inputBottom: 0,
				aid: '',
				page: 1,
				pageSize: 20,
				commentList: [],
			};
		},
		onLoad(options) {
			console.log('onLoad--',options)
			this.getWordDetails(options.id);
			this.getCommentList(options.id);
			this.aid = options.id;
		},
		onShow() {
			console.log('store',this.$store)
		},
		// 上滑加载更多评论
		onReachBottom(){
			
		},
		methods:{
			// 获取详情
			getWordDetails(aid){
				const params = {
					aid: aid
				};
				this.$u.api.fetchWordDetails(params).then(res=>{
					if(res.code === 0 ){
						this.detail = res.result;
					}else{
						
					}
				})
			},
			/**
			 * 获取评论列表
			 * aid 文章id
			 */
			getCommentList(aid){
				const params = {
					aid: aid,
					page: this.page,
					pageSize: this.pageSize
				};
				this.$u.api.fetchGetComments(params).then(res=>{
					if(res.code === 0){
						this.commentList = res.result.data;
					}
				})
			},
			// 增加评论
			addComment(value, userInfo){
				console.log('addcoment--value',value)
				const params = {
					aid: this.aid,
					uid: userInfo.uid,
					replyTo: '22',
					nickName: userInfo.nickname,
					content: value
				};
				this.$u.api.fetchAddComment(params).then(res=>{
					if(res.code === 0 ){
						this.$refs.addComment.clearInput();
						this.$u.toast('评论发表成功')
					}else{
						this.$u.toast('评论发表异常，请重试')
					}
				})
			},
			// 显示回复人
			setPlaceholder(){
				this.$refs.setPlaceholder()
			}
		},
	}
</script>

<style lang="less" scoped>

</style>
